<template>
    <div class="index-container">
        <div class="data-container">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark data-title">数据统计</div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">昨日增长人数：</div>
                        <div class="num">100人</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">系统总人数：</div>
                        <div class="num">10000人</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">昨日人数增长百分比：</div>
                        <div class="num">10.00%</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">昨日营业额：</div>
                        <div class="num">￥988.0</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">总营业额：</div>
                        <div class="num">￥10000.0</div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple data-item">
                        <div class="title">昨日营业额增长百分比：</div>
                        <div class="num">9.88%</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="chart-container">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark data-title">图表统计</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="chart" :span="24">
                    <ve-line :data="chartData" :colors="chartColor" width="98%" height="410px"></ve-line>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import styles from '../assets/scss/public.scss';
    export default {
        name: 'Index',
        data () {
            return {
                chartColor: [styles.chartColor],
                chartData: {}
            }
        },
        created() {
            this.getChartData();
        },
        methods: {
            getChartData () {
                this.$axios.get('/chartData').then( res => {
                   this.chartData = res.data.data;
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .index-container{
        height: 100%;
    }
    /*数据容器*/
    .data-container{
        flex: 1;
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
        padding: 16px;
        margin-bottom: 15px;
        border-radius: 3px;

        /*每个数据项*/
        .data-item{
            height: 120px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            /*数据每项的标题*/
            .title{
                flex: 1;
                width: 100%;
                padding-left: 30px;
                font-size: 17px;
                color: #aaa;

                display: flex;
                align-items: center;
            }

            /*数据每项的数字*/
            .num{
                flex: 2;
                width: 100%;
                font-size: 30px;
                font-weight: bold;
                padding-right: 20px;
                color: #666;

                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }

    /*标题*/
    .data-title{
        font-size: 20px;
        color: #333;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 16px;
    }


    /*表格图的容器*/
    .chart-container{
        flex: 2;
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
        padding: 16px 16px 0 16px;
        border-radius: 3px;

        .chart{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>
